<template>
    <div :class="['btns', { isPosition: type == 0 }]">
        <!-- 减少项 -->
      <span v-show="item.count > 0" @click="increment(item)">-</span>
      <em v-show="item.count > 0">{{ item.count }}</em>
      <!-- 添加 -->
      <span @click="add(item)">+</span>
    </div>
  </template>
  
  <script>
  export default {
    props: ["item", "type"],
    methods: {
      add(food) {
        // food.count++;
        if (!food.count) {
          food.count = 1;
        } else {
          food.count++;
        }
        this.$store.commit("setCarList", {
          item: food,
        });
      },
      increment(food) {
        food.count--;
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .btns {
// padding: 39px;
    display: flex;
    span {
        // padding-left: 30px;
      display: block;
      width: 24px;
      height: 24px;
      line-height: 20px;
      //让加号减号变成圆形状
    //   border-radius: 50%;
    border-radius: 50%;
      font-size: 24px;
      text-align: center;
      font-weight: bold;
      // color: rgb(0, 160, 220);
      color: aliceblue;
      border: 2px rgb(0, 160, 220) solid;
      background-color: rgb(0, 160, 220) ;
     
    // // position: absolute;
    // top: 10px;
    // left: 50px;
    // color: red;
    }
  }
  .isPosition {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  em{
    color: gray;
    padding: 5px 15px;
  }
  </style>
  